<template>
  <el-button type="danger" size="small" @click="deleteSpace" :loading="loading">删除空间</el-button>
</template>

<script>
export default {
  name: 'delete-button', // 删除空间按钮
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    space() { return this.$store.state.currentSpace; },
  },
  methods: {
    deleteSpace() {
      const msg = `<div>确认删除空间 <strong class="el-alert--error is-light is-bold">${this.space.title}</strong> 吗？</div>`;
      this.$confirm(msg, '提示', {
        dangerouslyUseHTMLString: true,
        customClass: 'confirm-left',
        confirmButtonText: '确定',
        confirmButtonClass: 'el-button--danger',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.loading = true;
        this.$api.spaces.delete({ spaceId: this.space.id })
          .then(() => {
            this.$message.success('删除成功');
            this.$root.$emit('routerPush', { path: '/' });
          })
          .catch(() => {})
          .then(() => { this.loading = false; });
      }).catch(() => {});
    },
  },
};
</script>

<style></style>
